
<template>
	<view>
		<view class="head">
			<view class="headL">
				<image src="../../static/mine/search_ico.png" class="searchIcon"></image>
				<input type="text" placeholder="请输入(15字以内)" v-model="keyword" maxlength="15" @input="valInp" />
				<image src="../../static/mine/delVal.png" class="delVal" v-if="keyword" @click="delVal"></image>
			</view>
			<view class="headR" @click="searchVal">搜索</view>
		</view>
		<view class="conWrap">
			<view class="searchCon" v-if="keyword&&addFlag">
				<image src="../../static/mine/topic.png"></image>
				<view class="searchConL">
					{{keyword}}
				</view>
				<view class="addTopic" @click="addTopic">添加话题</view>
			</view>
			<view class="searchItemWrap">
				<view class="searchItems" v-for="(item,index) in searchList" :key="index" :data-index="index" @click="selectTopic">
					<image src="../../static/mine/topic.png"></image>
					<view>
						<rich-text :nodes="item.nameStr"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:"",
				searchList:[],
				addFlag:false,
				page:1,
				limit:30,
				moreFlag:false
			}
		},
		onLoad() {
			
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.searchVal();
		},
		methods: {
			selectTopic(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let pages = getCurrentPages();
				pages[pages.length-2].$vm.topicData = this.searchList[index];
				uni.navigateBack({
					delta:1
				})
			},
			valInp(e){
				let flag = true;
				for(let i=0;i<this.searchList.length;i++){
					if(this.searchList[i].name==e.detail.value){
						flag = false;
					}
				}
				if(this.searchList.length==0){
					flag = false;
				}
				this.addFlag = flag;
			},
			searchVal(){
				let obj = {};
				obj.type = 4;
				obj.search = this.keyword;
				obj.page = this.page;
				obj.limit = this.limit;
				this.$u.api.labelList(obj).then(res=>{
					
					let flag = true;
					for(let i=0;i<res.list.length;i++){
						if(res.list[i].name==this.keyword){
							flag = false;
						}
					}
					this.addFlag = flag;
					if(this.page == 1){
						
						this.searchList = res.list.map(cur=>{
							cur.nameStr = this.brightKeyword(cur.name,this.keyword);
							return cur;
						})
					}else{
						
						this.searchList = this.searchList.concat(res.list.map(cur=>{
							cur.nameStr = this.brightKeyword(cur.name,this.keyword);
							return cur;
						}));
					}
					if(this.page<res.list.last_page){
						this.moreFlag = true;
					}else{
						this.moreFlag = false;
					}
				})
			},
			addTopic(){
				let obj = {};
				obj.type = 4;
				obj.name = this.keyword;
				this.$u.api.labelAdd(obj).then(res=>{
					
					this.$refs.uToast.show({
						title:"添加成功",
						type:"success",
						duration:1500
					})
					this.searchVal();
				})
			},
			delVal(){
				this.keyword = "";
			},
			brightKeyword(val,keyword) {
				let reg = new RegExp(keyword,"g");
				if (val.indexOf(keyword) !== -1) {
					return val.replace(reg, `<font style='color: #FFAC3F;font-size: 14px;'>${keyword}</font>`);
				} else {
					return val;
				}
			}
		}
	}
</script>

<style scoped>
	.searchItems{
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}
	.searchItems:last-child{
		margin-bottom: 0;
	}
	.searchItems>image{
		width: 28upx;
		height: 28upx;
		margin-right: 24upx;
	}
	.searchItems>view{
		width: calc(100% - 52upx);
		font-size: 28upx;
		line-height: 48upx;
	}
	
	
	.conWrap{
		width: 100%;
		box-sizing: border-box;
		padding: 0 50upx;
	}
	.searchCon{
		width: 100%;
		height: 86upx;
		border-bottom: 2upx solid #F5F5F5;
		padding-top: 8upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		margin-bottom: 30upx;
	}
	.searchCon>image{
		width: 28upx;
		height: 28upx;
		/* margin-right: 24upx; */
	}
	.addTopic{
		font-size: 24upx;
		line-height: 28upx;
		color: #FFAC3F;
		/* margin-left: 24upx; */
	}
	.searchConL{
		width: calc(100% - 172upx);
		font-size: 28upx;
		line-height: 48upx;
		color: #FFAC3F;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	
	.head{
		width: 100%;
		height: 88upx;
		display: flex;
		align-items: center;
		padding: 14upx 24upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.headL{
		width: calc(100% - 88upx);
		height: 60upx;
		border-radius: 30upx;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 32upx;
	}
	.searchIcon{
		width: 32upx;
		height: 32upx;
		margin-right: 8upx;
	}
	.delVal{
		width: 24upx;
		height: 24upx;
		margin-left: 8upx;
	}
	.headL>input{
		width: calc(100% - 72upx);
		height: 60upx;
		font-size: 24upx;
		color: #333333;
	}
	.headR{
		font-size: 28upx;
		line-height: 60upx;
		color: #333333;
		font-weight: bold;
	}
</style>
